<template>
	<view class="container">
		<u-sticky>
			<view class="search-wrap">
				<uni-search-bar placeholder="用户姓名，导购，商品名称，订单号" @confirm="getData(true)" radius="20"
					v-model="params.keyWord" cancelText="搜索" cancelButton="none" @cancel="getData(true)"
					@clear="handleClear">
				</uni-search-bar>
			</view>
		</u-sticky>
		<view class="plr_12 mt_20">
			<view class="list_item mt_8" v-for="item,index in dataList" :key="index">
				<OrderItem type="3" :data="item" @cancel="handleCancel" @confirm="handleConfirm"
					@delete="handleDelete" />
			</view>
			<view class="pt_16" v-if="!loading&&dataList.length">
				<u-loadmore :status="loadingStatus" />
			</view>
		</view>
		<PopupComfirmRadarOrder :data="currentOrder" :visible.sync="popupConfirmRadarOrderShow"
			@confirm="handleConfirmRadarOrder" />
	</view>
</template>

// 赚多多订单
<script>
	import api from '@/service/config/api.js'
	import OrderItem from '../components/OrderItem.vue'
	import PopupComfirmRadarOrder from '../components/PopupComfirmRadarOrder.vue'
	import dataMixin from '@/mixins/data.js'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [dataMixin],
		components: {
			OrderItem,
			PopupComfirmRadarOrder
		},
		data() {
			return {
				dataList: [],
				tabItemLeft: [],
				tabItemWidth: uni.upx2px(84),
				activeIndex: null,
				topData: {}, // 头部数据
				listUrl: '/order/api/tMyStaging/orderPageList',
				params: {
					keyWord: '',
					orderStatus:""
				},
				type: '',
				httpMethod: 'post',
				currentOrder: {},
				popupConfirmRadarOrderShow: false,
			};
		},
		computed: {
			...mapState(['userType']),
			tabLineStyle() {
				return {
					transform: `translateX(${this.tabItemLeft[this.activeIndex] + 'px'})`
				}
			},
			// 是否单商品
			isSingle() {
				return dataItem => {
					if (dataItem.orderInfoList && dataItem.orderInfoList.length) {
						let count = dataItem.orderInfoList.length
						return count <= 1 ? true : dataItem.isSendTogether
					} else if (dataItem.orderBrandInfoList && dataItem.orderBrandInfoList.length) {
						let count = dataItem.orderBrandInfoList.reduce((num, item) => {
							return num + item.productInfoList.length
						}, 0)
						return count <= 1 ? true : dataItem.isSendTogether
					} else {
						return true
					}
				}
			}
		},
		onLoad(options) {
			this.type = options.type || ''
			if (options.status) {
				this.params.orderStatus = Number(options.status)
			}
			uni.createSelectorQuery().in(this).selectAll('.top_menu_item')
				.boundingClientRect(
					data => {
						if (data.length) {
							this.tabItemLeft = data.map(item => {
								if (this.tabItemWidth > item.width) {
									return item.left - (this.tabItemWidth - item.width) / 2 - uni.upx2px(24)
								} else {
									return item.left + (item.width - this.tabItemWidth) / 2 - uni.upx2px(24)
								}
							})
							this.activeIndex = options.status || 0
						}
					}).exec()
		},
		onShow() {
			this.getData(true)
		},
		onHide() {
			uni.pageScrollTo({
				scrollTop: 0, //距离页面顶部的距离
				duration: 0
			});
		},
		methods: {
			getData(refresh = false, noHideLoading = false) {
				return new Promise((resolve, reject) => {
					this.isSearching = true
					if (refresh) {
						this.current = 1
						this.total = 1
						this.end = false
						this.$utils.loading()
					} else {
						this.loading = true
					}
					if (this.listUrl) {
						api.get(this.listUrl, {
							current: this.current,
							size: this.size,
							...this.params ? this.params : {}
						}, {
							noHideLoading
						}).then(res => {
							if (res.data.records) {
								let data = res.data.records.map(item => ({
									...item,
									productRuleStr: item.productRule ? JSON.parse(item
											.productRule).map(item1 => item1.value).join(' ') :
										''
								}))
								this.dataList = refresh ? (data || []) : [...this.dataList, ...(data ||
								[])];
							}
							if (res.data.total <= this.dataList.length) {
								this.end = true
							}
						}).finally(() => {
							resolve()
							this.loading = false
							this.initLoading = false
						})
					} else {
						resolve()
					}
				})
			},
			getOrderStatus() {
				let index = this.activeIndex ? this.activeIndex * 1 : 0
				switch (index) {
					case 1:
						// if (this.userType == 3) {
						// 	return 1
						// }
						return 2
					case 2:
						return 5
					case 3:
						return 10
					case 4:
						return 11
					default:
						break
				}
			},
			handleClickTab(index) {
				this.activeIndex = index
				if (index == 0) {
					const {
						orderStatus,
						...params
					} = this.params
					this.params = params
				} else {
					this.$set(this.params, 'orderStatus', this.getOrderStatus(index))
				}
				this.getData(true)
			},
			// 取消订单
			handleCancel(data) {
				if (data.procureOrderOrigin == 2 && this.appType == this.$base.ADMIN_TYPE) {
					this.$utils.showModal({
						content: '本订单为用户下单转单，请注意到经销商后台将用户下单取消',
						confirmText: '确认取消'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/cancelByOrderId', {
							orderId: data.id,
							orderInfoId: ''
						}).then(res => {
							this.$utils.showToast('取消下单成功')
							this.getAllData()
						})
					})
				} else {
					this.$utils.showModal({
						content: '确认取消该订单？',
						confirmText: '确认取消'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/cancelByOrderId', {
							orderId: data.id,
							orderInfoId: ''
						}).then(res => {
							this.$utils.showToast('取消下单成功')
							this.getAllData()
						})
					})
				}
			},
			// 确认订单
			handleConfirm(data, type) {
				console.log('dataaaaa',data,type)
				if (type == 'goods') {
					this.$utils.showModal({
						content: '确认收货吗？'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/confirmReceipt', {
							orderId: data.id
						}).then(res => {
							this.$utils.showToast('确认收货成功', 1500, 0, '', 'success')
							this.getAllData()
						})
					})
				} else if (type == 'install') {
					this.$utils.showModal({
						content: '确认安装吗？'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/confirmInstall/', {
							orderId: data.id
						}).then(res => {
							this.$utils.showToast('确认安装成功', 1500, 0, '', 'success')
							this.getAllData()
						})
					})
				} else {
					this.currentOrder = data
					this.popupConfirmRadarOrderShow = true
				}
			},
			// 删除订单
			handleDelete(data) {
				this.$utils.showModal({
					content: '是否删除该记录？',
				}).then(() => {
					this.$utils.loading()
					api.get('/order/api/order/delOrder/' + data.id).then(res => {
						this.$utils.showToast('删除记录成功')
						this.getAllData()
					})
				})
			},
			// 赚多多订单-确认下单
			handleConfirmRadarOrder(data, params) {
				this.$utils.loading()
				api.post('/order/api/order/sysConfirmOrder', {
					orderId: data.id,
					...params
				}).then(res => {
					this.$utils.showToast('下单成功', 1500, 0, '', 'success')
					this.popupConfirmRadarOrderShow = false
					this.getAllData(true)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-wrap {
		background: #fff;

		.uni-searchbar {
			padding: 20rpx 34rpx;

			/deep/.uni-searchbar__box {
				border-radius: 164rpx !important;
				height: 72rpx;
			}

			/deep/.uniui-search {
				color: #CCCCCC !important;
			}

			/deep/.uni-searchbar__cancel {
				line-height: 72rpx;
				padding-left: 52rpx;
			}
		}

		/deep/.uni-searchbar__box {
			justify-content: flex-start;
		}
	}

	.list-wrap {
		.list-box {
			margin-top: -10rpx;
		}
	}
</style>